<template>
    <div class="container">
        <div class="container-filter">
            <custom-filter @onSubmit="handleInitTable" @onReset="handleResetTable" hideEnabled></custom-filter>
        </div>
        <div class="container-data">
            <yl-multi-button
                class="multi-action"
                :selectedRowKeys="selectedRowKeys"
                @add="handleAddProd"
                :hideAdd="true"
            ></yl-multi-button>
            <a-table
                :columns="columns"
                :data-source="dataSource"
                :row-key="setRowKey"
                :pagination="pagination"
                :loading="loading"
                class="dept-data__table-table"
            >
                <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                    <span>{{ t(`yl.${item.slotName}`) }}</span>
                </template>
                <template #customAction="{ record }">
                    <a-button class="action-btn" @click="handleEdit(record)" type="primary" size="small">
                        <template #icon>
                            <EditOutlined />
                        </template>
                    </a-button>
                    <a-popconfirm placement="topRight" @confirm="handleDelete(record.id)">
                        <template #title>
                            <p>{{ t('yl.deleteConfirmtext') }}</p>
                        </template>
                        <a-button class="action-btn" type="danger" size="small">
                            <template #icon>
                                <Delete />
                            </template>
                        </a-button>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>

        <yl-dept-model
            :visible="visible"
            :loading="confirmLoading"
            :title="title"
            :dept="selectedRow"
            @cancle="handleCancle"
            @submit="handleSubmit"
        ></yl-dept-model>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed, createVNode } from 'vue';
import { useI18n } from 'vue-i18n';
import { PaginationQuery } from '@/types/table';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import { addCetegory, editCetegory } from '@/api/goods';
import { deleteEmptyKey } from '@/utils/help';
import ylMultiButton from '@/components/ylMultiButton.vue';
import customFilter from './components/tableFilter.vue';
import ylDeptModel from './components/deptModel.vue';
import deleteDataId from './deleteData';

import columns from './dataColumns';
import useTables from './dataTables';

export default defineComponent({
    name: 'department',
    components: {
        customFilter,
        ylMultiButton,
        ylDeptModel,
    },
    setup() {
        const { t } = useI18n();
        // 搜索条件
        let { tableQuery, getCetegoryData, selectedRow, selectedRowKeys, visible } = useTables;
        const state = reactive({
            title: computed(() => (selectedRowKeys.value.length ? t('yl.addSpecs') : t('yl.editSpecs'))),
            confirmLoading: false, // 弹窗按钮的loading
        });
        onMounted(() => {
            getCetegoryData(tableQuery);
        });

        // 搜索
        const handleInitTable = (query: PaginationQuery | TableCustomFilter) => {
            tableQuery.page = 0;
            tableQuery = Object.assign({}, tableQuery, { ...query });
            getCetegoryData(tableQuery);
        };
        // 重置
        const handleResetTable = (query: PaginationQuery | TableCustomFilter) => {
            tableQuery = Object.assign({}, tableQuery, { ...query });
            tableQuery.page = 0;
            selectedRowKeys.value = [];
            getCetegoryData(tableQuery);
        };
        // 新增、编辑部门
        const handleSubmit = (dept: NormalObj) => {
            deleteEmptyKey(dept);
            state.confirmLoading = true;
            const msg = dept.id ? t('yl.editSuccess') : t('yl.addSuccess');
            const realRequest = dept.id ? editCetegory(dept) : addCetegory(dept);
            return realRequest
                .then(() => {
                    state.confirmLoading = false;
                    message.success(msg);
                    visible.value = false;
                    const timer = setTimeout(() => {
                        handleInitTable(tableQuery);
                        clearTimeout(timer);
                    }, 500);
                })
                .catch(() => {
                    state.confirmLoading = false;
                });
        };

        return {
            ...toRefs(state),
            t,
            columns,
            ...useTables,
            handleInitTable,
            ...deleteDataId(),
            handleResetTable,
            handleSubmit,
        };
    },
});
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    &-filter {
        @include flex;
        &-item {
            margin-right: 20px;
        }
    }
    &-data {
        padding: $width20 $width0;
        .multi-action {
            background: $white;
        }
        .action-btn + .action-btn {
            margin-left: $width8;
        }
    }
}
</style>
